<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
* {margin: 0;padding: 0;text-decoration: none;}
body {padding: 20px;}
#container { width: 600px;height: 400px;border: 3px solid #333;overflow: hidden;position: relative;margin:20px auto;}
#list {width: 4200px;height: 400px;position: absolute;z-index: 1;}
#list img {width: 600px;height: 400px;float: left;}
#buttons {position: absolute;height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 250px;}
#buttons span {cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;
background: #333;margin-right: 5px;}
#buttons .on {background: red;}
.arrow {cursor: pointer;display: none;line-height: 40px;text-align: center;font-size: 26px;font-weight: bold;
width: 40px;height: 40px;position: absolute;z-index: 2;top: 180px;background-color: RGBA(0, 0, 0, .3);
color: #fff;border-radius: 50%;}
.arrow:hover {background-color: RGBA(0, 0, 0, .7);}#container:hover .arrow {display: block;}
#prev {left: 20px;}
#next {right: 20px;}
</style>
<body>
<!--第一个-->
<div id="container">
    <div id="list" style="left:0px;">
      <img src="img/1.png" alt="1" />
      <img src="img/2.png" alt="2" />
      <img src="img/3.png" alt="3" />
      <img src="img/4.png" alt="4" />
      <img src="img/5.png" alt="5" />
    </div>
    <div id="buttons">
      <span index="1" class="on"></span>
      <span index="2"></span>
      <span index="3"></span>
      <span index="4"></span>
      <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>
</div>


</body>
<script type="text/javascript">
window.onload = function() {
var list = document.getElementById('list');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
function animate(offset) {
var newLeft = parseInt(list.style.left) + offset;
list.style.left = newLeft + 'px';

 if(newLeft<-2400){
      list.style.left = 0 + 'px';
 }
 if(newLeft> 0){
      list.style.left = -2400 + 'px';
 }
}
prev.onclick = function() { 
animate(600);
}
next.onclick = function() { 
animate(-600);
}



//定时器，自动轮播
var timer;
function play() {
    timer = setInterval(function () {
        next.onclick()
    }, 3000)
}
play();

//鼠标移入定时器关闭，移出去定时器打开。
 var container = document.getElementById('container');

            function stop() {
                clearInterval(timer);
            }
            container.onmouseover = stop;
            container.onmouseout = play;


//每张图小圆点对应颜色变化
var buttons = document.getElementById('buttons').getElementsByTagName('span');
            var index = 1;

            function buttonsShow() {
                //清除之前的样式
                for (var i = 0; i < buttons.length; i++) {
                    if (buttons[i].className == 'on') {
                        buttons[i].className = '';
                    }
                }
                //数组从0开始，故index-1
                buttons[index - 1].className = 'on';
            }

            prev.onclick = function() {
                index -= 1;
                if (index < 1) {
                    index = 5;
                }
                buttonsShow();
                animate(600);
            }
            next.onclick = function() {
                //5个小圆点判断
                index += 1;
                if (index > 5) {
                    index = 1;
                }
                buttonsShow();
                animate(-600);
            }

//移入小圆点到对应的图片
            for (var i = 0; i < buttons.length; i++) {
                // 这里使用的是立即执行函数，
                (function(i) {
                    buttons[i].onmouseover = function() {
                        var clickIndex = parseInt(this.getAttribute('index'));
                        var offset = 600 * (index - clickIndex); 
                        animate(offset);
                        index = clickIndex;
                        buttonsShow();
                    }
                })(i)
            }


}



</script>
</html>